import { ref } from 'vue';

export function useTogglePicker() {
  const showPicker = ref(false);

  const metricList = [
    { text: 'g', value: '1' },
    { text: 'kg', value: '1000' },
  ];
  const imperialList = [
    { text: 'oz', value: '1' },
    { text: 'lb', value: '16' },
    { text: 'st', value: '224' },
  ];

  const columns = ref([]);

  function togglePicker(unit) {
    showPicker.value = true;

    if (unit === 'metric') {
      columns.value = metricList;
      return;
    }

    columns.value = imperialList;
  }

  return {
    showPicker,
    togglePicker,
    columns,
  };
}
